<template>
    <div>
        <div class="mBg zhuanye py-[20px] px-[12px]">
            <div class=" formBox">
                <div class="yuyue p-[20px] pb-[5px]">
                    <!-- 预约信息开始 -->
                    <p class="text-[17px] font-bold mb-[5px]">预约信息</p>
                    <van-form ref="vanFromRef">
                        <van-field v-model="ruleForm.name" :rules="[
                            { required: true, message: '请填写姓名' },
                        ]" name="姓名" label="姓名" placeholder="输入姓名" />
                        <van-field v-model="ruleForm.genderName" @click="sexpicker = true" is-link readonly name="picker"
                            label="性别" :rules="[
                                { required: true, message: '请填写性别' },
                            ]" placeholder="选择性别" />
                        <van-field v-model="ruleForm.parent_phone" :rules="[
                            { required: true, message: '请填写手机号' },
                            {
                                pattern: /^1[3456789]\d{9}$/,
                                message: '手机号码格式错误！',
                                trigger: 'onBlur',
                            },
                        ]" name="家长手机号" label="家长手机号" placeholder="输入家长手机号" />
                        <van-field :rules="[
                            { required: true, message: '请填写学校和班级' },
                        ]" p v-model="ruleForm.school_class" name="学校和班级" label="学校和班级" placeholder="输入学校和班级" />
                     <van-field v-model="ruleForm.organization_Name" @click="danweiDialog = true"
                      is-link readonly name="picker"
                            label="预约单位" :rules="[
                                { required: true, message: '请填写预约单位' },
                            ]" placeholder="预约单位" />
                </van-form>
                    <!-- 预约信息结束 -->
                </div>
                <div class="bar"></div>
                <div class="yuyue p-[20px] pb-[0]">
                    <!-- 预约日期开始 -->
                    <p class="text-[17px] font-bold mb-[10px]">预约日期</p>
                    <div class="flex  items-center">
                        <div class="flex-1 flex">
                            <!-- <div class="choseBox ccc mr-[5px]">
                                <van-icon name="arrow-left" />
                            </div> -->
                            <div class="flex-1">
                                <van-row>
                                    <van-col span="6" v-for="(item, index) in dayList" :key="index">
                                        <div class="h-[44px] ccc dayBox mb-[20px]" @click="choseDayHanlde(item.date)"
                                            :class="{ 'active': ruleForm.appointment_date === item.date }">
                                            <div class=" text-center">
                                                <p class="mb-[10px]">{{ item.week }}</p>
                                                <span class="color2"> {{ item.date }}</span>
                                            </div>
                                        </div>
                                    </van-col>
                                </van-row>
                            </div>
                            <!-- <div class="choseBox ccc ml-[5px]">
                                <van-icon name="arrow" />
                            </div> -->
                        </div>

                        <!-- <div class=" shrink-0 ml-[12px]">
                            <van-icon name="notes-o" size="30" />
                        </div> -->
                    </div>
                    <!-- 预约日期结束 -->
                </div>
                <div class="bar"></div>
                <div class="yuyue p-[20px] pb-[5px]">
                    <!-- 预约时段开始 -->
                    <p class="text-[17px] font-bold mb-[5px]">预约时段</p>
                    <!-- <p>
                        当天还可预约
                        <span class="color3 font-bold">14</span>
                        人，超过的预约时间将往后一天延迟
                    </p> -->
                    <!-- 预约时段结束 -->


                    <!-- 上午时段开始 -->
                    <div class=" mb-[10px] mt-[16px]">
                    </div>
                    <van-row >
                        <van-col span="8" v-for="(item, index) in timeList" :key="index">
                            <div class="h-[29px] ccc timeBox mb-[13px] mx-[5px] "
                                @click="choeTime(item , index)"
                                :class="{
                                     'active': ruleForm.appointment_time === index,
                                     'disabled': item.status ==2
                            }">
                                <div class=" text-center">
                                    <p>{{item.time}}</p>
                                </div>
                            </div>
                        </van-col>
                    </van-row>
                    <!-- 上午时段结束 -->


                    <!-- 下午时段开始 -->
                    <!-- <div class=" mb-[5px] mt-[16px]">
                        <p>下午</p>
                    </div>
                    <van-row justify="space-between">
                        <van-col span="8" v-for="(item, index) in 4" :key="index">
                            <div class="h-[29px] ccc timeBox mb-[13px] mx-[5px] "
                                :class="{ 'active': ruleForm.time === index }">
                                <div class=" text-center">
                                    <p>8:00-9:00</p>
                                </div>
                            </div>
                        </van-col>
                    </van-row> -->
                    <!-- 下午时段结束 -->
                </div>
            </div>

        </div>

        <!-- 确认预约开始 -->
        <div class="p-[15px] flex justify-between items-center">
            <div>
                <p class="text-[16px] ">确认预约</p>
                <p class="color2 mt-[5px]" v-if="ruleForm.appointment_time  || ruleForm.appointment_time == '0'">{{ruleForm.appointment_date}}
                     {{timeList[ruleForm.appointment_time].time}}</p>
            </div>
            <div>
                <van-button round class="w-[176px]" @click="onSubmit" type="primary">提交预约</van-button>
            </div>
        </div>
        <!-- 确认预约结束 -->

        <!-- 性别弹窗开始 -->
        <van-popup v-model:show="sexpicker" position="bottom">
            <van-picker :columns="columns" @confirm="onConfirm" @cancel="sexpicker = false" />
        </van-popup>
        <!-- 性别弹窗结束 -->


         <!-- 单位弹窗开始 -->
         <van-popup v-model:show="danweiDialog" position="bottom">
            <van-picker :columns="danweiList" @confirm="danweiDialogconfirm" @cancel="danweiDialog = false" />
        </van-popup>
        <!-- 单位弹窗结束 -->
    </div>
</template>

<script setup lang="ts">
import { showSuccessToast, showFailToast } from 'vant';
import { useAutoRequest } from "@/hooks/loading"
import api from "@/api/api"
const [loading, GetOrganization] = useAutoRequest(api.GetOrganization)
const [loading1, GetDataTime] = useAutoRequest(api.GetDataTime)
const [loading2, GetPeriod] = useAutoRequest(api.GetPeriod)
const [loading3, ReserveAdd] = useAutoRequest(api.ReserveAdd)
const ruleForm = ref({
    name: '',
    gender: '',
    genderName: '',
    parent_phone: '',
    school_class: '',
    appointment_date: '',
    appointment_time: '',
    organization_id: '',
    organization_Name : '',
})
const sexpicker = ref(false)
const columns = [
    { text: '男', value: '1' },
    { text: '女', value: '2' },
];


const onConfirm = (e) => {
    console.log(e);
    ruleForm.value.gender = e.selectedOptions[0].value
    ruleForm.value.genderName = e.selectedOptions[0].text
    sexpicker.value = false
}



// 选择日期开始
const dayList = ref<any[]>([])
const choseDayHanlde = (e: string) => {
    ruleForm.value.appointment_date = e
    
}

const getDAY = async()=> {
    const data = await GetDataTime({})
    dayList.value = data
    ruleForm.value.appointment_date = data[0].date
}
getDAY()

// 选择日期结束


//选择时间开始
const timeList = ref([])
const getTime = async(date, organization_id)=> {
   const data =  await GetPeriod({
    date,
    organization_id
   })
   timeList.value = data
}
// getTime()
watchEffect(()=> {
    const date = ruleForm.value.appointment_date
    const organization_id = ruleForm.value.organization_id
    console.log(date, organization_id);
    if (date && organization_id) {
        ruleForm.value.appointment_time = ''
        getTime(date, organization_id)
    }
})

const choeTime =(item ,index)=> {
    if (item.status ==2) return
    ruleForm.value.appointment_time = index
}
//选择时间结束


const vanFromRef = ref<any>()
const router = useRouter()
const onSubmit = async () => {
    await vanFromRef.value.validate()
    console.log(ruleForm.value)
    if (
        !ruleForm.value.appointment_date ||  ruleForm.value.appointment_time ===''
        ) {
            showFailToast('请选择预约时间')
            return
        }

    await ReserveAdd({
        // ...ruleForm.value,
        datas: JSON.stringify(ruleForm.value)
    })
    showSuccessToast('预约成功!')
    setTimeout(()=> {
        router.back()
    },1000)
}




// 单位开始
const danweiList = ref<any>([])
const danweiDialog = ref(false)
const getInfo = async()=> {
    const data = await GetOrganization({})
    danweiList.value = data.data.map(res=> {
        return {
            ...res,
            text: res.name,
            value: res.id
        }
    })
}
const danweiDialogconfirm = (e)=> {
    const item = e.selectedOptions[0]
    console.log(item);
    ruleForm.value.organization_Name = item.name
    ruleForm.value.organization_id = item.id
    danweiDialog.value = false
}
getInfo()
// 单位结束


</script>

<style scoped lang="scss">
.zhuanye {
    height: calc(100vh - 80px) !important;

    :deep(.van-cell) {
        padding-left: 0 !important;
    }
    .disabled {
        background: #C8C8C8 !important;
        p {
            color: #fff !important;
        }
    }
    :deep(.van-field__label) {
        color: #000;
        font-weight: 500;
    }

    .formBox {
        background: #fff;
        border-radius: 7px 7px 7px 7px;
        height: 100%;
        overflow: auto;
    }

    .choseBox {
        flex-shrink: 0;
        width: 20px;
        height: 44px;
        background: #F6F6F6;
        border-radius: 0px 0px 0px 0px;
    }

    .active {
        color: #4C7BE4 !important;
        background: #EEF3FF;
        border: 1px solid #4C7BE4;

        p {
            color: #4C7BE4 !important;
        }
    }

    .dayBox {
        border-radius: 6px 6px 6px 6px;
    }

    .timeBox {
        border-radius: 15px 15px 15px 15px;
        background: #F6F6F6;
    }
}
</style>